import { DatePicker, Input, InputNumber } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import CommonTable from '@/components/CommonTable';
import { CrudFormLayout } from '@/components/Crud';
import { REQUIRED } from '@/constants/rules';
import request from '@/utils/request';
import { useAsyncEffect } from 'ahooks';
import { Button, Descriptions, Form, message } from 'antd';
import { useState } from 'react';

import dayjs from 'dayjs';
import './index.less';

const Detail = (props) => {
  const { open, record, onCancel, onOk } = props;
  const [weightData, setWeightData] = useState([]);
  const [form] = Form.useForm();
  useAsyncEffect(async () => {
    if (open && record) {
      const res = await request({
        url: '/datas/settlement/detail',
        method: 'GET',
        params: {
          settlementId: record.settlementId,
        },
      });
      setWeightData(res.weights);
      form.setFieldsValue({
        ...res.settlement,
        receiveTime: res.receiveTime ? dayjs(res.receiveTime) : undefined,
      });
    }
  }, [open, record]);

  // 格式化数据用于展示
  const formatData = (data) => {
    if (!data) return {};

    return {
      ...data,
      remark: data.remark || '-',
    };
  };

  const formattedRecord = formatData(record);
  const confirmSettlement = () => {
    form.validateFields().then(async (rs) => {
      const res = await request({
        url: '/datas/settlement/confirm',
        method: 'GET',
        params: {
          settlementId: record.settlementId,
          ...rs,
          receiveTime: dayjs(rs.receiveTime).format('YYYY-MM-DD'),
        },
      });
      message.success('操作成功');
      onOk?.();
    });
  };

  const items = [
    {
      key: 'lineName',
      label: '线路',
      children: record?.lineName || '-',
    },
    {
      key: 'title',
      label: '标题',
      children: record?.title || '-',
    },
    {
      key: 'day',
      label: '结算日期',
      children: record?.title || '-',
    },
    {
      key: 'fromDate',
      label: '开始日期',
      children: record?.fromDate || '-',
    },
    {
      key: 'toDate',
      label: '结束日期',
      children: record?.fromDate || '-',
    },
    {
      key: 'total',
      label: '磅单数',
      children: record?.total || '-',
    },
    {
      key: 'totalPrice',
      label: '总金额',
      children: record?.totalPrice || '-',
    },
    {
      key: 'remark',
      label: '备注',
      children: formattedRecord.remark,
    },
  ];
  const columns = [
    {
      title: '装车磅单号',
      dataIndex: 'loadWeightCode',
      width: 150,
    },
    {
      title: '装车净重',
      dataIndex: 'loadWeight',
      width: 150,
    },
    {
      title: '装车时间',
      dataIndex: 'loadTime',
      width: 150,
    },
    {
      title: '卸车磅单号',
      dataIndex: 'unloadWeightCode',
      width: 150,
    },
    {
      title: '卸车净重',
      dataIndex: 'unloadWeight',
      width: 150,
    },
    {
      title: '卸车时间',
      dataIndex: 'unloadTime',
      width: 150,
    },
    {
      title: '任务营收',
      dataIndex: 'taskPrice',
      width: 150,
    },
    {
      title: '车牌号',
      dataIndex: 'license',
      width: 150,
    },
    {
      title: '装货司机',
      dataIndex: 'loadDriver',
      width: 150,
    },
    {
      title: '卸货司机',
      dataIndex: 'unloadDriver',
      width: 150,
    },
  ];

  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width={1000}
      destroyOnHidden
      footer={null}
    >
      <h3>结算单信息</h3>
      <Descriptions
        items={items}
        column={2}
        bordered
        size="middle"
        labelStyle={{
          fontWeight: 'bold',
          width: '120px',
          textAlign: 'right',
        }}
        contentStyle={{
          minHeight: '32px',
          padding: '8px 12px',
        }}
      />
      <div className="weight-detail-container">
        {/* <h3>磅单信息</h3> */}
        <CommonTable
          dataSource={weightData}
          rowKey="weightId"
          columns={columns}
          pagination={false}
        />
      </div>
      <div className="confirm-detail-container">
        <h3>收款信息</h3>
        <Form
          form={form}
          layout="vertical"
          initialValues={{ receiveTime: dayjs() }}
        >
          <CrudFormLayout itemMinWidth={250}>
            <Form.Item label="收款金额" name="price" rules={[REQUIRED]}>
              <InputNumber />
            </Form.Item>
            <Form.Item label="收款时间" name="receiveTime" rules={[REQUIRED]}>
              <DatePicker />
            </Form.Item>
          </CrudFormLayout>
          <Form.Item label="原因" name="reason">
            <Input.TextArea />
          </Form.Item>
          <Button type="primary" onClick={confirmSettlement}>
            确认收款
          </Button>
        </Form>
      </div>
    </CommonDrawer>
  );
};

export default Detail;
